springboot + vue 部署上线的两种方式

2023-07-06 18:31| 来源: 网络整理| 查看: 265

springboot 部署一般是采用jar 部署，也有采用war（集成了jsp，不推荐使用）

一、将vue 项目编译后打入jar 包部署方式

1、运行vue打包命令，前提是vue项目正常，无错误！

npm run build

2、运行命令后，在项目根目录会生成一个dist 文件夹，将dist 文件夹的所有文件，拷贝至springboot项目中的static（static默认放行）

访问前缀，如果打包后的文件直接放置于springboot的static文件夹下则不需要加前缀，如果在static下建立了二级目录，则这里需要改成目录名称，例如：static/test1 则这里需要变成/test1 在运行npm run build

无独有偶，如果需要部署多个前端项目，比如PC后台，H5端两个项目，则需要在static 下建二级文件夹。这就是baseUrl 的前缀的作用。当然根据系统架构的不同，因情况定。总之，需要注意系统的访问前缀

module.exports = { baseUrl: '/',//这里是访问前缀，如果打包后的文件直接放置于springboot的static文件夹下则不需要加前缀，如果在static下建立了二级目录，则这里需要改成目录名称，例如：static/test1 则这里需要变成/test1 在运行npm run build devServer: { port:8080, proxy: 'http://47.96.21.80:8999' }, chainWebpack: config => { config.merge({ externals: { "CKEDITOR": "window.CKEDITOR" } }); }, pwa: { iconPaths: { favicon32 : 'favicon.ico', favicon16 : 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon : 'favicon.ico', msTileImage : 'favicon.ico' } } }

3、将项目打包成jar，并部署到服务器上，springboot不需要安装tomcat容器，运行jar命令即可

nohup java -jar test-1.0.jar --spring.profiles.active=trial &

--spring.profiles.active=trial 这里可以指定配置文件。博主一般根据多个环境的不同，创建多个环境对应的配置文件，如下：因此可以采用配置命令方式设定系统应用哪个配置文件。

application-dev.yml application-server.yml application-trial.yml

4、访问项目

IP:端口/前缀

优势：

1、部署方便，直接了当。

2、简单明了。

劣势

1、在只修改前端的情况下需要重新打包，比较繁琐。

二、前后端分离部署

1、运行vue打包命令，前提是vue项目正常，无错误！

npm run build

2、安装nginx 并添加如下配置

server { listen 9999; # 监听端口 server_name localhost; # 域名可以有多个，用空格隔开 location / { root D:\phpstudy_pro\WWW\energy; #站点根目录，即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。 index index.html index.htm; #目录内的默认打开文件, } #ssl配置省略 location /前缀{ rewrite ^.+前缀/?(.*)$ /$1 break; proxy_pass http://IP:端口; #即需要代理的IP地址 proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } #error_page 404 /404.html; #对错误页面404.html 做了定向配置 # redirect server error pages to the static page /50x.html #将服务器错误页面重定向到静态页面/50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }

3、将vue项目中的dist下所有的文件拷贝至nginx中的root 对应的系统目录下。

4、访问项目

IP：nginx配置的端口

【本文地址】

公司简介

联系我们